<template>
  <div class="frame">
    <div class="toolbar">
      <toolbar></toolbar>
      <topNavbar :nav="nav"></topNavbar>
      <toolSetUp></toolSetUp>
    </div>
    <el-row>
      <el-col :span="24">
        <div class="frameBg">
          <div class="scroll">
            <div class="frame-container">
              <div class="dutyTable">
                <div class="toptitle">
                  <div class="left">今日值班表</div>
                  <div class="right">
                    <div class="btns">
                      <el-button @click="back">返 回</el-button>
                    </div>
                  </div>
                </div>
                <div class="borderT"></div>
                <div class="file-main">
                  <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column type="expand">
                      <template scope="props">
                        <p style="color:#0cb7c6;">{{props.row.nowDate}}</p>
                        <table class="inlineTable" cellpadding="0" cellspacing="0" border="1" width="0" style="background:#eef1f6;width:100%;">
                          <tr>
                            <th>员工</th>
                            <th v-for="item in props.row.tableList" v-show="props.row.tableList.length!=0">{{item.empScheduleInfo}}</th>
                            <th v-show="props.row.tableList.length==0">暂无数据</th>
                          </tr>
                          <tr>
                            <td>
                              联系方式
                            </td>
                            <td v-for="item in props.row.tableList" v-show="props.row.tableList.length!=0">{{item.empPhone}}</td>
                            <td v-show="props.row.tableList.length==0">暂无数据</td>
                          </tr>
                        </table>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="团队"
                      prop="teamName">
                    </el-table-column>
                    <el-table-column
                      label="当前服务人员"
                      prop="currentEmpCount">
                    </el-table-column>
                    <el-table-column
                      label="负责人电话"
                      prop="phone">
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import navApi from "../../service/navApi"
  import staffApi from '../../service/corporation/staffApi';
  import serviceCenterApi from '../../service/serCenter/serviceCenterApi';
  import commonJs from '../../config/common';
  export default {
    data() {
      return {
        nav:{},
        emName:"",
        tableData: [],
        nowDate:null,
      }
    },
    methods: {
      init(){
        //权限菜单判断
        let self = this;
        self.nav = JSON.parse(window.sessionStorage.getItem('navData'));

        this.getScheduleInfo();
        this.getNowDate();
      },
      getScheduleInfo(){
        let self = this;
        serviceCenterApi.getOrgTeamScheduleInfo().then(
          (res)=>{
            self.tableData = res.data.data;
            for(let i=0;i<self.tableData.length;i++){
              (function(index){
                self.getEmpScheduleInfo(self.tableData[index].teamId);
              })(i)
            }
          }
        );
      },
      getEmpScheduleInfo(tmId){
        let self = this;
        serviceCenterApi.getTeamEmpScheduleInfo(tmId).then(
          (res)=>{
            for(let i=0;i<self.tableData.length;i++){
              if(self.tableData[i].teamId==tmId){
                self.tableData[i].tableList = res.data.data;
                self.tableData[i].nowDate = self.nowDate;
                break;
              }
            }
          }
        );
      },
      back(){
        this.$router.push({name:'serviceCenter'});
      },
      getNowDate(){
        this.nowDate = commonJs.getCurrentDateTime();
      },
    },
    mounted: function () {
      this.init();
    },
  }
</script>

<style>
.dutyTable .inlineTable td,.dutyTable .inlineTable th{
  border: 1px solid #dfe6ec!important;
  text-align: center;
}
</style>
